<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
</head>
<body>
<table></table>
<script>
	var table = document.querySelector('table');
	var TGM = table.GM({
		gridManagerName: 'test',
		isCombSorting: false, // 使用非组合排序方式
		height: '400px',
		supportAjaxPage:true, // 启用分页
		supportSorting: true, // 启用排序
		ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',  // 这个是我写的一个数据地址， 主要用于测试
		ajax_type: 'POST',
		query: {pluginId: 1},
		pageSize:30,
		columnData: [{
			key: 'name',
				remind: 'the name',
				width: '100px',
				align: 'right',
				text: '名称',
				sorting: ''
			},
			{
				key: 'info',
				remind: 'the info',
				text: '使用说明'
			},
			{
				key: 'url',
				remind: 'the url',
				text: 'url'
			},
			{
				key: 'createDate',
				remind: 'the createDate',
				width: '100px',
				text: '创建时间',
				sorting: 'DESC', // 指定 createDate 列使用排序，并且设置初始排序为 DESC(降序)
				template: function(createDate, rowObject){
					return new Date(createDate).toLocaleString(); // 由于接口返回的是时间戳, 这里变更下显示形式
				}
			},
			{
				key: 'lastDate',
				remind: 'the lastDate',
				width: '130px',
				text: '最后修改时间',
				sorting: '',  // 指定 lastDate 列使用排序， 但不设置初始排序
				template: function(lastDate, rowObject){
					return new Date(lastDate).toLocaleString(); // 由于接口返回的是时间戳, 这里变更下显示形式
				}
			}
		]
	});
</script>
</body>
</html>
